<template>
	<view style="height: 100vh;">
		<view class="payment-top ">
			<text class="name">可提现金额（元）</text>
			<view class="pic">
				<text class="pic-font"><text class="num"> ￥</text>{{ 0 }}</text>
			</view>
		</view>
		<view class="payment">
			<view class="tixian">
				<text style="margin-bottom: 20rpx;">提现金额</text>
				<view class="top">
					<u--input placeholder="输入提现金额" prefixIcon="rmb" prefixIconStyle="font-size: 22px;color: #909399;"
						v-model="inputValue" maxlength='4' type='number'></u--input>
					<u-button type="primary" @click="$u.throttle(setAll, 500)" shape="circle">全部提现</u-button>
				</view>
				<text style="color: #868686;font-size: 30rpx;">手续费每笔 <text style="color: #FF4110;">2.2</text>元
					，提现后1-2个工作日到账</text>
			</view>
			<view class='tip picList'>
				<view class="center">
					<view class="">
						<text>姓名</text>
						<u--input placeholder="输入姓名" v-model="userName" maxlength='4' type='text' border="bottom"
							inputAlign="right" clearable></u--input>
					</view>
					<view class="">
						<text>身份证</text>
						<u--input placeholder="输入身份证" v-model="userIdNumber" maxlength='18' type='number'
							inputAlign="right" border="bottom" clearable></u--input>
					</view>
					<view class="">
						<text>收款账户</text>
						<text @click="openPicker" style="flex: 1;text-align: right;color: #7d7d7d;font-size: 30rpx;">选择 > </text>
						<u-picker :show="show" :columns="columns" @confirm="confirm"></u-picker>
					</view>

					<!-- 		<view class="">
						<text>收款银行</text>
						<u--input
						 boder="bottom"
							    placeholder="输入收款银行"
								v-model="userBank"
								maxlength='16'
								type='number'
							></u--input>
					</view> -->

				</view>
				<view class="tips-box">
					<view class="tips mt-30">注意事项：</view>
					<view class="tips-samll" v-for="item in rechargeAttention" :key="item">
						{{item}}
					</view>
				</view>

			</view>
			<view class="w94">
				<u-button type="primary" @click="$u.throttle(submitSub, 500)" shape="circle"> 确认提现</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toLogin
	} from '@/utils/login.js';


	export default {
		data() {
			let that = this;
			return {
				show: false,
				columns: [
					['支付宝', '微信']
				],
				userName: '',
				userIdNumber: '',
				userBank: "",
				inputValue: '',
				payMode: [{
						name: '微信支付',
						icon: 'icon-weixinzhifu',
						value: 'weixin',
						title: `微信支付`,
						payStatus: true
					},
					// #ifdef H5 ||APP-PLUS
					{
						name: `支付宝支付`,
						icon: 'icon-zhifubao',
						value: 'alipay',
						title: `支付宝支付`,
						payStatus: true
					},
					// #endif
				],
			};
		},

		watch: {
			// isLogin: {
			// 	handler: function(newV, oldV) {
			// 		if (newV) {
			// 			this.getUserInfo();
			// 			this.getRecharge();
			// 		}
			// 	},
			// 	deep: true
			// }
		},
		onLoad(options) {
			// this.getRecharge();
			// if (this.isLogin) {
			// 	this.getBasicConfig();
			// 	this.getUserInfo();
			// 	this.getRecharge();
			// } else {
			// 	toLogin();
			// }
		},
		methods: {
			confirm(e) {
				console.log(e.value[0]);
				if(e.value[0]=='支付宝'){
					
				}else if(e.value[0]=='微信'){
					
				}
				this.show = false
			},
			openPicker() {
				this.show = true
			},
			replaceInput(event) {
				// 必须在nextTick中
				this.$nextTick(() => {
					this.money = event.target.value.match(/^\d*(\.?\d{0,2})/g)[0]
				})
			},
			getBasicConfig() {
				basicConfig().then(res => {
					const {
						ali_pay_status,
						pay_weixin_open
					} = res.data;
					this.payMode[0].payStatus = pay_weixin_open;
					// #ifdef APP-PLUS || H5
					this.payMode[1].payStatus = ali_pay_status;
					// #endif
					//#ifdef MP
					this.payMode[1].payStatus = false;
					//#endif
				}).catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
			},
			onLoadFun: function() {
				// this.getUserInfo();
				// this.getRecharge();
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			},
			navRecharges: function(index) {
				this.active = index;
			},
			/**
			 * 获取用户信息
			 */
			getUserInfo: function() {
				// let that = this;
				// getUserInfo().then(res => {
				// 	that.$set(that, 'userinfo', res.data);
				// 	if (!res.data.extract_type.includes('3')) {
				// 		this.$set(this, 'navRecharge', [`账户充值`])
				// 	}
				// })
			},
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				this.pay_close = false
				action && this[action] && this[action](value);
			},
			pay() {
				this.pay_close = true;
			},
			setAll(){
				this.inputValue = 2000
			},
			/*
			 * 用户提现
			 */
			submitSub() {
				let that = this
				// if(){
				// 	uni.showToast({
				// 		title:'xxx！'
				// 	})
				// 	return
				// }
				console.log("用户提现", this.inputValue, this.userName, this.userIdNumber, this.userBank);
			},
			// 绑定收款
			bindingWX() {
				console.log("绑定收款", );
			}
		},
	}
</script>
<style scoped>
	.tip .pic-box-color .active {
		color: #fff !important;
	}

	.top>>>.u-input {
		flex: 3 !important;
	}

	.top>>>.u-button {
		flex: 1 !important;
		margin-left: 20rpx !important;
	}
</style>
<style lang="scss" scoped>
	.center {
		margin-top: 20rpx;
		padding: 30rpx;
		width: 100vw;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-radius: 30rpx;
		box-shadow: 1px 1px 8px 3px #e6e6e6;

		view {
			display: flex;
			margin-top: 22rpx;

			text {
				color: black;
				font-size: 33rpx;
				margin-top: 10rpx;
				width: 160rpx;
			}
		}
	}

	.tixian {
		background-color: #fff;
		padding: 30rpx;
		box-shadow: 0px 5px 8px 0px #e6e6e6;
		// position: relative;
		// top: 10rpx;
		// left: 10rpx;
		display: flex;
		flex-direction: column;

		.top {
			display: flex;
			margin-bottom: 20rpx;
		}
	}

	page {
		width: 100%;
		height: 100%;
		background-color: #fff;
	}

	.bgcolor {
		background-color: $u-primary
	}

	.payment {
		position: relative;
		top: -60rpx;
		width: 100%;
		background-color: #fff;
		border-radius: 10rpx;
		padding-top: 25rpx;
		border-top-right-radius: 39rpx;
		border-top-left-radius: 39rpx;
	}



	.payment .input {
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px dashed #dddddd;
		margin: 60rpx auto 0 auto;
		padding-bottom: 20rpx;
		font-size: 56rpx;
		color: #333333;
		flex-wrap: nowrap;

	}

	.payment .input text {
		padding-left: 106rpx;
	}

	.payment .input input {
		padding-right: 106rpx;
		width: 300rpx;
		height: 94rpx;
		text-align: center;
		font-size: 70rpx;
	}

	.payment .placeholder {
		color: #d0d0d0;
		height: 100%;
		line-height: 94rpx;
	}

	.payment .tip {
		font-size: 26rpx;
		color: #888888;
		padding: 0 30rpx;
		margin-top: 25rpx;
	}



	.payment-top {
		width: 100%;
		height: 300rpx;
		background-color: $u-primary;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		flex-direction: column;

		.name {
			font-size: 26rpx;
			color: rgba(255, 255, 255, 0.8);
			margin-top: -38rpx;
			margin-bottom: 30rpx;
		}

		.pic {
			font-size: 32rpx;
			color: #fff;

			.num {
				font-size: 56rpx;
			}
		}

		.pic-font {
			font-size: 78rpx;
			color: #fff;
		}
	}

	.picList {
		display: flex;
		flex-wrap: wrap;
		margin: 30rpx 0;

		.pic-box {
			width: 32%;
			height: auto;
			border-radius: 20rpx;
			margin-top: 21rpx;
			padding: 20rpx 0;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			flex-direction: column;
			align-items: center;
			margin-right: 12rpx;

			&:nth-child(3n) {
				margin-right: 0;
			}
		}

		.pic-box-color {
			background-color: #f4f4f4;
			color: #656565;
		}

		.pic-number {
			font-size: 22rpx;
		}

		.pic-number-pic {
			font-size: 38rpx;
			margin-right: 10rpx;
			text-align: center;
		}

		.active {
			color: #fff !important;
		}

		.pic-box-color-active {
			background-color: $u-primary !important;
			color: #fff !important;
		}
	}

	.tips-box {
		margin-top: 20rpx;

		.tips {
			font-size: 28rpx;
			color: #333333;
			font-weight: 800;
			margin-bottom: 14rpx;
			margin-top: 20rpx;
		}

		.tips-samll {
			font-size: 24rpx;
			color: #333333;
			margin-bottom: 14rpx;
		}

		.tip-box {
			margin-top: 30rpx;
		}
	}

	.tips-title {
		margin-top: 20rpx;
		font-size: 24rpx;
		color: #333;
	}
</style>